<!-- 登录 -->
<template>
  <div class="login">
    <div class="l-main">
      <div class="l-fm">
        <el-form :model="fm" :rules="rules" :ref="fm.fname" @keyup.enter.native="onLoginSubmit">
          <el-form-item prop="lphone">
            <el-input prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号码" maxlength="11"
              v-model="fm.lphone"></el-input>
          </el-form-item>

          <el-form-item prop="lpass">
            <el-input prefix-icon="el-icon-lock" show-password placeholder="请输入登录密码" maxlength="18"
              v-model="fm.lpass"></el-input>

            <span class="reset-lpass" @click="setResetLpassMd({ state: true })">重置密码？</span>
          </el-form-item>

          <div class="flex-between l-btns">
            <el-button :loading="sbloading" type="primary" icon="el-icon-user-solid" @click="onLoginSubmit">
              立即登录
            </el-button>

            <el-button type="success" plain icon="el-icon-user" @click="setRegAuthUserMd({ state: true })">
              注册/认证用户
            </el-button>
          </div>
        </el-form>
      </div>
    </div>

    <RegAuthUser v-if="regAuthUserMd.state" :myData="regAuthUserMd" @myClick="setRegAuthUserMd" />

    <ResetLpass v-if="resetLpassMd.state" @myClick="setResetLpassMd" />

  </div>
</template>

<script>
import ResetLpass from './reset-lpass';
import RegAuthUser from './reg-auth-user';

export default {
  name: 'Login',
  components: { ResetLpass, RegAuthUser },
  data() {
    return {
      // 重置密码-弹框
      resetLpassMd: { state: false },
      // 注册/认证用户-弹框
      regAuthUserMd: { state: false },

      redirect: '',
      otherQuery: {},
      fm: {
        fname: 'loginFm',
        lphone: '',
        lpass: '',
        remberMe: 'false',
      },
      sbloading: false,// 提交按钮
      rules: {
        lphone: [
          { required: true, message: '请输入登录手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '手机号由11位数字组成', trigger: 'blur' }
        ],
        lpass: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 18, message: '登录密码由6-18位数字、字母、_、.组成', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true
    }
  },
  created() {

    // 正式上线时需要取消这行
    if (process.env.NODE_ENV == 'development') {
      this.fm.lphone = '18140010558';
      this.fm.lpass = '654321';
    }

  },
  methods: {
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    // 显示/隐藏-重置密码-弹框
    setResetLpassMd(e) {
      this.resetLpassMd = e;
    },
    // 开启/关闭-注册/认证用户-弹框
    setRegAuthUserMd(e) {
      let that = this;

      if (e.state) {// 打开-弹框
        that.regAuthUserMd.state = true;
      } else {// 关闭-弹框
        that.regAuthUserMd.state = false;
      }
    },
    // 登录表单提交
    onLoginSubmit() {
      let that = this, U = that.U, fm = U.scopy(that.fm);

      that.$refs[fm.fname].validate((valid) => {
        if (!valid) {
          return false;
        } else {
          that.sbloading = true;          // 添加按钮加载效果
          let loading = U.qloading('登录中，请稍后...'); // 添加遮罩

          that.$store.dispatch('user/passLogin', fm).then(res => {
            that.sbloading = false;  // 取消按钮加载效果
            U.qclose(loading);       // 关闭遮罩

            if (res && res.code == 1) {
              // 导航到主页
              that.$router.push({ path: that.redirect || '/' });

              U.qsuccess('欢迎进入车队管理系统！');
            } else if (res.phone) {// 打开认证用户弹框
              that.regAuthUserMd.state = true;
              that.regAuthUserMd.obj = { authPhone: res.phone, authName: res.realName };
            } else {
              U.qerror(res.msg);
            }
          }).catch(() => {
            that.sbloading = false;  // 取消按钮加载效果
            U.qclose(loading);       // 关闭遮罩
          });

        }
      });
    }
  },
}
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  background: url('../../assets/login-bg.jpg') no-repeat;
  background-size: cover;

  .l-main {
    width: 400px;
    position: absolute;
    top: 35%;
    right: 20%;
    padding: 40px 40px 20px 40px;
    box-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
    background: #fff;
    border-radius: 10px;

    .l-btns {
      padding-top: 20px;
    }

    .reset-lpass {
      position: absolute;
      right: 0px;
      bottom: -25px;
      color: #2979ff;
      font-size: 12px;
      cursor: pointer;
    }
  }
}
</style>
